<template>
  <div class="home">
    <!-- 英雄区域 -->
    <div class="hero-section">
      <div class="hero-content">
        <h1>AI 智能助手</h1>
        <p class="subtitle">让人工智能为您的工作和生活带来革新体验</p>
        <div class="hero-buttons">
          <el-button type="primary" size="large" @click="$router.push('/login')">
            立即开始
          </el-button>
          <el-button size="large" @click="$router.push('/tutorial')">
            查看教程
          </el-button>
        </div>
      </div>
      <div class="hero-image">
        <img src="https://img.alicdn.com/imgextra/i1/O1CN01LaNeng1UzH3UtG2jH_!!6000000002586-0-tps-2878-1438.jpg" alt="AI Assistant" />
      </div>
    </div>

    <!-- 特性区域 -->
    <div class="section-title">
      <h2>核心特性</h2>
      <p>为您提供全方位的智能服务</p>
    </div>

    <div class="features-section">
      <el-row :gutter="30">
        <el-col :span="8" v-for="feature in features" :key="feature.title">
          <el-card class="feature-card" :body-style="{ padding: '30px' }">
            <div class="feature-icon" :class="feature.iconClass">
              <el-icon :size="50">
                <component :is="feature.icon" />
              </el-icon>
            </div>
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.description }}</p>
            <ul class="feature-list">
              <li v-for="(item, index) in feature.items" :key="index">
                <el-icon><Check /></el-icon>
                {{ item }}
              </li>
            </ul>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 数据统计区域 -->
    <div class="stats-section">
      <div class="stats-bg"></div>
      <el-row :gutter="30">
        <el-col :span="6" v-for="stat in stats" :key="stat.title">
          <div class="stat-card">
            <el-icon :size="40" class="stat-icon">
              <component :is="stat.icon" />
            </el-icon>
            <div class="stat-number">{{ stat.number }}</div>
            <div class="stat-title">{{ stat.title }}</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 使用场景 -->
    <div class="section-title">
      <h2>应用场景</h2>
      <p>适用于多种工作与生活场景</p>
    </div>

    <div class="scenarios-section">
      <el-row :gutter="30">
        <el-col :span="8" v-for="scenario in scenarios" :key="scenario.title">
          <div class="scenario-card" :style="{ backgroundImage: `url(${scenario.image})` }">
            <div class="scenario-content">
              <h3>{{ scenario.title }}</h3>
              <p>{{ scenario.description }}</p>
              <el-button type="primary" text>了解更多</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- AI 对话演示 -->
    <div class="section-title">
      <h2>智能对话</h2>
      <p>体验流畅自然的人机交互</p>
    </div>

    <div class="demo-section">
      <el-card class="demo-card">
        <div class="demo-header">
          <div class="demo-title">AI 助手</div>
          <div class="demo-actions">
            <el-button-group>
              <el-button text><el-icon><Refresh /></el-icon></el-button>
              <el-button text><el-icon><Download /></el-icon></el-button>
            </el-button-group>
          </div>
        </div>
        <div class="demo-chat">
          <div class="message bot">
            <div class="message-avatar">
              <el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            </div>
            <div class="message-content">
              <p>您好！我是AI助手，有什么可以帮您的吗？</p>
              <span class="message-time">12:00</span>
            </div>
          </div>
          <div class="message user">
            <div class="message-content">
              <p>请介绍一下你的功能。</p>
              <span class="message-time">12:01</span>
            </div>
            <div class="message-avatar">
              <el-avatar :size="40" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
            </div>
          </div>
          <div class="message bot">
            <div class="message-avatar">
              <el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            </div>
            <div class="message-content">
              <p>我可以帮助您：</p>
              <ul>
                <li>回答各类问题和咨询</li>
                <li>协助编写和优化代码</li>
                <li>进行文本分析和数据处理</li>
                <li>提供多语言翻译服务</li>
              </ul>
              <span class="message-time">12:02</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 客户评价 -->
    <div class="section-title">
      <h2>用户反馈</h2>
      <p>来自真实用户的评价</p>
    </div>

    <div class="testimonials-section">
      <el-carousel :interval="4000" type="card">
        <el-carousel-item v-for="testimonial in testimonials" :key="testimonial.name">
          <div class="testimonial-card">
            <div class="testimonial-content">
              <el-icon class="quote-icon"><QuoteRight /></el-icon>
              <p>{{ testimonial.content }}</p>
              <div class="testimonial-author">
                <el-avatar :src="testimonial.avatar" />
                <div class="author-info">
                  <h4>{{ testimonial.name }}</h4>
                  <p>{{ testimonial.title }}</p>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 开始使用 -->
    <div class="cta-section">
      <h2>开始使用 AI 智能助手</h2>
      <p>立即体验智能化办公新方式</p>
      <el-button type="primary" size="large" @click="$router.push('/login')">
        免费试用
      </el-button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import {
  ChatLineRound, Connection, Lock, Check, User, Message,
  Timer, Refresh, Download, QuoteRight, Star
} from '@element-plus/icons-vue'

export default {
  name: 'Home',
  components: {
    ChatLineRound,
    Connection,
    Lock,
    Check,
    User,
    Message,
    Timer,
    Refresh,
    Download,
    QuoteRight,
    Star
  },
  setup() {
    const features = [
      {
        icon: 'ChatLineRound',
        iconClass: 'icon-chat',
        title: '智能对话',
        description: '基于先进的AI技术，提供自然、流畅的对话体验',
        items: [
          '多轮对话理解',
          '上下文记忆',
          '个性化回复',
          '多语言支持'
        ]
      },
      {
        icon: 'Connection',
        iconClass: 'icon-scene',
        title: '多场景应用',
        description: '支持编程、写作、分析等多种场景的智能辅助',
        items: [
          '代码编写与优化',
          '文案创作',
          '数据分析',
          '知识问答'
        ]
      },
      {
        icon: 'Lock',
        iconClass: 'icon-security',
        title: '安全可靠',
        description: '采用先进的加密技术，确保您的数据安全',
        items: [
          '端到端加密',
          '数据脱敏',
          '隐私保护',
          '安全认证'
        ]
      }
    ]

    const stats = [
      { icon: 'User', number: '100万+', title: '用户数量' },
      { icon: 'Message', number: '5000万+', title: '对话次数' },
      { icon: 'Star', number: '99.9%', title: '服务可用性' },
      { icon: 'Timer', number: '24/7', title: '全天候服务' }
    ]

    const scenarios = [
      {
        title: '智能办公',
        description: '提升办公效率，简化工作流程',
        image: 'https://img.alicdn.com/imgextra/i4/O1CN01c26iB51UyR3MKMFvk_!!6000000002586-0-tps-2878-1438.jpg'
      },
      {
        title: '代码助手',
        description: '智能编程辅助，提高开发效率',
        image: 'https://img.alicdn.com/imgextra/i2/O1CN01O8w1rm1UzH3XgFo3m_!!6000000002586-0-tps-2878-1438.jpg'
      },
      {
        title: '数据分析',
        description: '深度数据洞察，辅助决策制定',
        image: 'https://img.alicdn.com/imgextra/i3/O1CN01dt9D8p1UzH3WNx4CC_!!6000000002586-0-tps-2878-1438.jpg'
      }
    ]

    const testimonials = [
      {
        name: '张先生',
        title: '软件工程师',
        content: 'AI助手极大提升了我的编程效率，代码建议非常实用。',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      },
      {
        name: '李女士',
        title: '产品经理',
        content: '文档生成和数据分析功能帮助我更好地完成工作。',
        avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
      },
      {
        name: '王先生',
        title: '企业主管',
        content: '智能助手为我们的团队带来了显著的效率提升。',
        avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
      }
    ]

    return {
      features,
      stats,
      scenarios,
      testimonials
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 章节标题 */
.section-title {
  text-align: center;
  margin-bottom: 60px;
}

.section-title h2 {
  font-size: 36px;
  color: #303133;
  margin-bottom: 16px;
}

.section-title p {
  font-size: 18px;
  color: #606266;
}

/* 英雄区域 */
.hero-section {
  display: flex;
  align-items: center;
  padding: 80px 0;
  margin-bottom: 80px;
  background: linear-gradient(135deg, #1890ff 0%, #001529 100%);
  border-radius: 16px;
  color: white;
  overflow: hidden;
}

.hero-content {
  flex: 1;
  padding: 0 60px;
}

.hero-content h1 {
  font-size: 56px;
  font-weight: 600;
  margin-bottom: 24px;
  background: linear-gradient(to right, #fff, #e6f7ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-content .subtitle {
  font-size: 24px;
  margin-bottom: 40px;
  opacity: 0.9;
}

.hero-buttons {
  display: flex;
  gap: 20px;
}

.hero-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image img {
  max-width: 100%;
  height: auto;
}

/* 特性卡片 */
.feature-card {
  height: 100%;
  text-align: center;
  transition: all 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-chat {
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  color: white;
}

.icon-scene {
  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
  color: white;
}

.icon-security {
  background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
  color: white;
}

.feature-list {
  text-align: left;
  margin-top: 20px;
  padding-left: 0;
  list-style: none;
}

.feature-list li {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #606266;
}

.feature-list .el-icon {
  margin-right: 8px;
  color: #52c41a;
}

/* 数据统计 */
.stats-section {
  position: relative;
  margin: 100px 0;
  padding: 60px 0;
  border-radius: 16px;
  overflow: hidden;
}

.stats-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #f0f5ff 0%, #e6fffb 100%);
  z-index: -1;
}

.stat-card {
  text-align: center;
  padding: 40px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-icon {
  color: #1890ff;
  margin-bottom: 16px;
}

/* 场景展示 */
.scenarios-section {
  margin-bottom: 100px;
}

.scenario-card {
  height: 300px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.scenario-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
}

/* 对话演示 */
.demo-card {
  max-width: 800px;
  margin: 0 auto 100px;
  border-radius: 12px;
  overflow: hidden;
}

.demo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
}

.demo-title {
  font-weight: 600;
  color: #303133;
}

.message {
  display: flex;
  gap: 16px;
  margin: 24px 0;
}

.message.user {
  flex-direction: row-reverse;
}

.message-content {
  max-width: 70%;
  padding: 16px 20px;
  border-radius: 12px;
  position: relative;
}

.bot .message-content {
  background: #f5f7fa;
}

.user .message-content {
  background: #ecf5ff;
}

.message-time {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
  display: block;
}

/* 用户评价 */
.testimonials-section {
  margin-bottom: 100px;
}

.testimonial-card {
  height: 100%;
  padding: 40px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.quote-icon {
  font-size: 32px;
  color: #1890ff;
  margin-bottom: 24px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  margin-top: 24px;
}

.author-info {
  margin-left: 16px;
}

/* 行动召唤 */
.cta-section {
  text-align: center;
  padding: 80px 0;
  margin-bottom: 60px;
  background: linear-gradient(135deg, #1890ff 0%, #001529 100%);
  border-radius: 16px;
  color: white;
}

.cta-section h2 {
  font-size: 36px;
  margin-bottom: 16px;
}

.cta-section p {
  font-size: 18px;
  margin-bottom: 32px;
  opacity: 0.9;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-section {
    flex-direction: column;
    padding: 40px 0;
  }

  .hero-content {
    padding: 0 20px;
    text-align: center;
  }

  .hero-content h1 {
    font-size: 36px;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-image {
    margin-top: 40px;
  }

  .section-title h2 {
    font-size: 28px;
  }

  .features-section .el-col,
  .stats-section .el-col,
  .scenarios-section .el-col {
    width: 100%;
    margin-bottom: 20px;
  }
}
</style> 